<template>
  <div>
    <el-card>
      <div slot="header">
        <span class="panel-title home-title">{{ $t('m.SysNotice') }}</span>
        <div style="font-size:13px;margin-top: 5px;color: red;">
          {{ $t('m.Push_System_Notification') }}
        </div>
      </div>
      <div class="create">
        <el-button
            type="primary"
            size="small"
            @click="openNoticeDialog(null)"
            icon="el-icon-plus">
          {{ $t('m.Create') }}
        </el-button>
      </div>
      <div class="list">
        <vxe-table
            :loading="loading"
            ref="table"
            :data="noticeList"
            auto-resize
            stripe>
          <vxe-table-column min-width="50" field="id" title="ID"/>
          <vxe-table-column
              min-width="150"
              field="title"
              show-overflow
              :title="$t('m.Notice_Title')"/>
          <vxe-table-column
              min-width="150"
              field="gmtCreate"
              :title="$t('m.Created_Time')">
            <template v-slot="{ row }">
              {{ row.createTime | localtime }}
            </template>
          </vxe-table-column>
          <vxe-table-column
              min-width="150"
              field="gmtModified"
              :title="$t('m.Modified_Time')">
            <template v-slot="{ row }">
              {{ row.modifiedTime | localtime }}
            </template>
          </vxe-table-column>
          <vxe-table-column
              min-width="150"
              field="adminUsername"
              show-overflow
              :title="$t('m.Author')"
          />
          <vxe-table-column
              min-width="100"
              field="state"
              :title="$t('m.Notice_Push')"
          />
          <vxe-table-column :title="$t('m.Option')" min-width="150">
            <template v-slot="row">
              <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('m.Edit_Notice')"
                  placement="top">
                <el-button
                    icon="el-icon-edit-outline"
                    @click.native="openNoticeDialog(row.row)"
                    size="mini"
                    type="primary"
                />
              </el-tooltip>
              <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('m.Delete_Notice')"
                  placement="top">
                <el-button
                    icon="el-icon-delete-solid"
                    @click.native="deleteNotice(row.row.id)"
                    size="mini"
                    type="danger"
                />
              </el-tooltip>
            </template>
          </vxe-table-column>
        </vxe-table>

        <div class="panel-options">
          <el-pagination
              class="page"
              layout="prev, pager, next"
              @current-change="currentChange"
              :page-size="pageSize"
              :total="total"
          />
        </div>
      </div>
    </el-card>
    <!--编辑通知对话框-->
    <el-dialog
        :title="noticeDialogTitle"
        :visible.sync="showEditNoticeDialog"
        :fullscreen="true"
        @open="onOpenEditDialog">
      <el-form label-position="top" :model="notice">
        <el-form-item :label="$t('m.Notice_Title')" required>
          <el-input
              v-model="notice.title"
              :placeholder="$t('m.Notice_Title')"
              class="title-input"
          />
        </el-form-item>
        <el-form-item :label="$t('m.Notice_Content')" required>
          <Editor :value.sync="notice.content"/>
        </el-form-item>
        <div class="visible-box">
          <span>{{ $t('m.Notice_Recipient') }}</span>
          <span>
            <el-radio v-model="notice.type" label="All">
              {{ $t('m.All_User') }}
            </el-radio>
            <el-radio v-model="notice.type" label="Single" disabled>
              {{ $t('m.Designated_User') }}
            </el-radio>
            <el-radio v-model="notice.type" label="Admin" disabled>
              {{ $t('m.All_Admin') }}
            </el-radio>
          </span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click.native="showEditNoticeDialog = false">
          {{ $t('m.Cancel') }}
        </el-button>
        <el-button type="primary" @click.native="submitNotice">
          {{ $t('m.OK') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const Editor = () => import('@/components/admin/Editor.vue');
import api from '@/common/api';
import myMessage from '@/common/message';
import {mapGetters} from 'vuex';

export default {
  name: 'notice',
  components: {
    Editor,
  },
  data() {
    return {
      //显示编辑通知对话框
      showEditNoticeDialog: false,
      //通知列表
      noticeList: [],
      //每页显示数目
      pageSize: 10,
      //通知总数
      total: 0,
      //模式：创建、修改...
      mode: 'create',
      //通知 (new | edit) model
      notice: {
        id: null,
        title: '',
        content: '',
        type: '',
        adminId: '',
      },
      //对话框标题
      noticeDialogTitle: 'Edit Notice',
      //是否显示加载
      loading: false,
      //当前页码
      currentPage: 1,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //打开通知编辑对话框并回显选中通知数据
    openNoticeDialog(row) {
      this.showEditNoticeDialog = true;
      if (row !== null) {
        this.noticeDialogTitle = this.$i18n.t('m.Edit_Notice');
        this.notice = Object.assign({}, row);
        this.mode = 'edit';
      } else {
        this.noticeDialogTitle = this.$i18n.t('m.Create_Notice');
        this.notice.title = '';
        this.notice.content = '';
        this.notice.type = 'All';
        this.notice.adminId = this.userInfo.uid;
        this.mode = 'create';
      }
    },
    //打开编辑对话框的回调
    onOpenEditDialog() {
      //暂时解决 文本编辑器显示异常bug
      setTimeout(() => {
        if (document.createEvent) {
          let event = document.createEvent('HTMLEvents');
          event.initEvent('resize', true, true);
          window.dispatchEvent(event);
        } else if (document.createEventObject) {
          window.fireEvent('onresize');
        }
      }, 0);
    },
    //编辑通知，默认传入MouseEvent
    submitNotice(data = undefined) {
      if (!data.id) {
        data = this.notice;
      }
      let funcName = this.mode === 'edit' ? 'admin_updateNotice' : 'admin_createNotice';
      api[funcName](data).then((res) => {
        this.showEditNoticeDialog = false;
        myMessage.success(this.$i18n.t('m.Post_successfully'));
        this.init();
      }).catch();
    },
    //获取通知列表
    getNoticeList(page) {
      this.loading = true;
      api.admin_getNoticeList(page, this.pageSize, 'All').then(
          (res) => {
            this.loading = false;
            this.total = res.data.data.total;
            this.noticeList = res.data.data.records;
          },
          (res) => {
            this.loading = false;
          }
      );
    },
    init() {
      this.getNoticeList(1);
    },
    //切换页码回调
    currentChange(page) {
      this.currentPage = page;
      this.getNoticeList(page);
    },
    //删除通知
    deleteNotice(noticeId) {
      this.$confirm(this.$i18n.t('m.Delete_Notice_Tips'), 'Warning', {
        confirmButtonText: this.$i18n.t('m.OK'),
        cancelButtonText: this.$i18n.t('m.Cancel'),
        type: 'warning',
      }).then(() => {
        //执行确定删除
        this.loading = true;
        api.admin_deleteNotice(noticeId).then((res) => {
          this.loading = true;
          myMessage.success(this.$i18n.t('m.Delete_successfully'));
          this.init();
        });
      }).catch(() => {
        //执行取消删除
        this.loading = false;
      });
    },
  },
  watch: {
    $route() {
      this.init();
    },
  },
  computed: {
    ...mapGetters(['userInfo']),
  }
}
</script>

<style scoped>
.title-input {
  margin-bottom: 20px;
}

.visible-box {
  margin-top: 10px;
  float: left;
}

.visible-box span {
  margin-right: 10px;
}

.el-form-item {
  margin-bottom: 2px !important;
}

/deep/ .el-dialog__body {
  padding-top: 0 !important;
}

.create {
  margin-bottom: 5px;
}
</style>